<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../css/bootstrap.css">
    <link rel="stylesheet" href="../../css/bootstrap-theme.css">
    <link rel="stylesheet" href="../../css/page.css">
</head>
<body>
<div id="addModal" class="modal fade" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header modal-panel">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">&times;</button>
                <h4 class="modal-title title-add" id="roleLabel">行业词库</h4>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">业务名称</label>
                <div class="col-sm-10">
                    <input class="form-control" id="industryName" type="text" value="" maxlength="10" placeholder="业务名称不超过10个字" />
                </div>
            </div>
            <div class="modal-footer" style="text-align: center;">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="addLexiconIndustry()">保存</button>
            </div>
        </div>
    </div>
</div>

<div class="modal-dialog">
    <div class="modal-content" style="width: 860px" id="modal_content">
        <div class="modal-header modal-panel">
            <button type="button" class="close" data-dismiss="modal"
                    aria-hidden="true">&times;</button>
            <h4 class="modal-title title-add" id="roleLabel">行业词库</h4>
        </div>
        <!--这个div被当做了模板, 如果修改这个, 要同步修改-->
        <div class="form-group" id="groupInput" style="margin-top: 10px;">
            <label class="col-sm-2 control-label">业务名称</label>
            <div class="col-sm-5">
                <input class="form-control type_key" type="text" value="" maxlength="10" placeholder="业务名称不超过10个字" />
            </div>
            <label class="col-sm-2 control-label">业务名称</label>
            <div class="col-sm-3">
                <select class="type_value">
                    <option value="0" selected="selected">默认</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
            </div>
        </div>
        <br>
        <div class="form-group" style="margin-top: 20px;">
            <button onclick="add()">添加</button>
        </div>
        <div class="modal-footer" style="text-align: center;">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" onclick="addLexiconIndustry()">保存</button>
        </div>
    </div>
</div>

<button onclick="getData()">获取数据</button>
</body>
<script src="../../js/jquery-3.4.1.js"></script>
<script src="../../js/bootstrap.js"></script>
<script>

    let groupInput = $('#groupInput');
    let modalContent = $('#modal_content');

    $(() => {

    });

    function add() {
        if(modalContent.children("div").length > 6) {
            console.log("单词最多添加5个");
            return;
        }
        groupInput.after(`
        <br>
        <div class="form-group" style="margin-top: 10px;">
            <label class="col-sm-2 control-label">业务名称</label>
            <div class="col-sm-5">
                <input class="form-control type_key" type="text" value="" maxlength="10" placeholder="业务名称不超过10个字" />
            </div>
            <label class="col-sm-2 control-label">业务名称</label>
            <div class="col-sm-3">
                <select class="type_value">
                    <option value="0" selected="selected">默认</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
            </div>
        </div>
        `);
    }

    function add2() {
        if(modalContent.children("div").length > 6) {
            console.log("单词最多添加5个");
            return;
        }
        groupInput.after(groupInput.clone(true));
    }

    function getData() {
        let arr = new Array();
        $('.type_key').each(function (index, value) {
            arr.push({
                type_key: $(value).val()
            });
        });
        $('.type_value').each(function (index, value) {
            arr[index].type_value = $(value).val();
        });
        console.log(JSON.stringify(arr));
    }

</script>
</html>